<template>
    <section style="height:56px" v-show="items&&items.length>0">
        <h4 class="title">{{title}}</h4>
        <div class="money">
            <p ref="line" class="line"></p>
            <p class="missLine"></p>
            <p ref="eLine" :class="{active:isActive}" class="eLine"></p>
            <ul class="points">
                <li v-for="(item,i) in items" :key="i" @touchstart="start(i,$event)" :style="{left:setLeft(i)}">
                    <i class="point" :class="value == i?'selected':''">
                        <span class="point_circle" :class="{inMoney:i<value,selected:i==value}"></span>
                    </i>
                    <span>{{item}}</span>
                </li>
            </ul>
        </div>
    </section>
</template>
<script>
export default {
    data() {
        return {
            isActive: false,
            startX: 0,
            startWidth: null,
            maxWidth: null,
            limitWidth: null,
            piceWidth: null
        }
    },
    props: {
        title: String,
        items: Array,
        value: Number,
        limitIndex: Number
    },
    mounted() {
        this.setWidth(this.value);
        this.maxWidth = this.$refs.line.clientWidth;
        this.piceWidth = this.maxWidth / (this.items.length - 1);
        this.limitWidth = this.piceWidth * (this.limitIndex - 1);
    },
    methods: {
        //设置数字位置
        setLeft(i) {
            if (this.piceWidth) {
                return this.piceWidth * i - 24 + 'px';
            }
        },
        setWidth(i) {
            this.$refs.eLine.style.width = (i) / (this.items.length - 1) * 100 + '%';
            this.startWidth = this.$refs.eLine.clientWidth;
        },
        start(i, e) {
            e.preventDefault();
            if (i >= this.limitIndex) return;
            this.startX = e.touches[0].clientX;
            this.isActive = true;
            this.setWidth(i);
            var vm = this;
            var touches;
            var clientX;
            var width;
            var move = (e) => {
                e.preventDefault();
                touches = e.touches;
                if (touches.length > 1) return;
                clientX = touches[0].clientX;
                width = vm.startWidth + clientX - vm.startX;
                if (width < 0) width = 0;
                if (width > vm.limitWidth) width = vm.limitWidth;
                var i = Math.round(width / this.piceWidth);
                vm.$emit('input', i);
                vm.$refs.eLine.style.width = width + 'px';
            }
            var end = (e) => {
                e.preventDefault();
                var width = vm.$refs.eLine.clientWidth;
                var i = Math.round(width / this.piceWidth);
                vm.$emit('input', i);
                vm.setWidth(i);
                vm.isActive = false;
                window.removeEventListener('touchmove', move);
                window.removeEventListener('touchend', end);
            }
            window.addEventListener('touchmove', move);
            window.addEventListener('touchend', end);
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../asset/scss/mixin/export.scss';
.title {
    text-align: center;
    @include font_sn_gnl;
    margin: 0 0 $pt20 0;
}

.money {
    width: 90%;
    height: 4px;
    margin: 0 auto;
    position: relative;
    .line {
        width: 100%;
        height: 4px;
        background: #d1d1d1;
    }
    .missLine {
        position: absolute;
        height: 4px;
        top: 0;
        right: 100%;
        left: -4px;
        background: $energized;
    }
    .eLine {
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        background: $energized;
        &:after {
            content: '';
            @include icon($pt20);
            background-image: url('/static/img/slide_big@3x.png');
            right: -$pt6;
            top: -$pt7;
            z-index: 1;
        }
        &.active:after {
            width: $pt30;
            height: $pt30;
            right: -$pt12;
            top: -$pt12;
        }
    }
    .eLine.active~.points .point.selected {
        opacity: 0;
    }
    .points {
        position: absolute;
        top: -1px;
        @include flex;
        @include justify(space-between,
        justify);
        width: 100%;
        text-align: center;
        li {
            width: 40px;
            position: absolute;
            text-align: center;
            .point {
                display: block;
                width: $pt20;
                height: $pt20;
                border-radius: 50%;
                top: -$pt6;
                left: -$pt6;
                position: relative;
                opacity: 1;
                z-index: 2;
                .point_circle {
                    position: absolute;
                    border-radius: 10px;
                    right: -13px;
                    top: $pt4;
                    width: 10px;
                    height: 10px;
                    background: #d1d1d1;
                    &.inMoney {
                        background: $energized;
                    }
                    &.selected{
                        display: none;
                    }
                }
                &:after {
                    position: absolute;
                    top: -12px;
                    right: -12px;
                    bottom: -12px;
                    left: -12px;
                    content: ' ';
                }
            }
            span {
                display: block;
            }
        }
    }
}
</style>